<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<div id="vue">
        <h1>Site : {{site}}</h1>
        <h1>Url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>

    <div id="app">
        <div v-for="item in [1,2]" v-if="item !== 2">{{item}}</div>
    </div>
-->
    <div id="app1">
        <template>
            <p>
                <el-radio v-model="radio" label="1">查询数据</el-radio>
                <el-radio v-model="radio" label="2">录入查询</el-radio>
            </p>
        </template>
    </div>
</body>
<script src="./js/vue.js" type="text/javascript"></script>
<script type="application/javascript">
    /*var data = {
        site:"Vue教程",
        url:"www.Vue.com",
        alexa:1000
    };
    var vm = new Vue({
        el:'#vue',
        data:data
    });

    document.write(vm.site===data.site);
    document.write("<br>");

    vm.site = "Runoob";
    document.write(data.site + "<br>");

    data.alexa = 1000;
    document.write(vm.alexa);

    new Vue({
        el:"#app",
        data:{
            item : 2
        }
    });
*/
    new Vue({
        name:"JobDataUpdate",
        data(){
            return {
                radio:'1',
            }
        },
        watch:{
            radio:function (curVal,oldVal){
                if (curVal == 1){
                    console.log("查询数据需要处理的逻辑!")
                }else if(curVal == 2){
                    console.log("录入数据需要处理的逻辑!")
                }
            }
        }
    })
</script>
</html>